<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            float: left;
        }
        div.left{
            width: 200px;
            height: 450px;
            border: 1px solid black;
            margin: 20px;
            padding-top: 20px;
        }
        div.left li,div.left img{
            width: 130px;
            height: 130px;
            list-style: none;
        }
        div.left li{
            margin: 0 auto;
            margin-bottom: 20px;
        }
        .currentLi{
            border: 3px solid peru;
        }
        div.right{
            width: 450px;
            height: 450px;
            border: 1px solid black;
            padding: 10px;
            overflow: hidden;
            margin: 20px;
        }
        div.right li,div.right img{
            width: 450px;
            height: 450px;
            
            list-style: none;
        }
        div.right li{
            margin-bottom: 10px;
        }
        div.right ul{
            position: relative;
            top: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var leftUl=document.getElementsByTagName('ul')[0];
            var rightUl=document.getElementsByTagName('ul')[1];
            var leftLis=leftUl.children;
            var flag=0;
            //事件代理
            leftUl.onmouseover=function(event){
                if(event.target.nodeName=='IMG'){
                    //给所有li取消边框
                    for(var i=0;i<leftLis.length;i++){
                        leftLis[i].className='';
                    }
                    //给当前li添加样式
                    event.target.parentNode.className='currentLi'
                    //获取当前li 下标调用轮播函数
                    var index=event.target.parentNode.getAttribute('val');
                    // console.log(Number(index));
                    run(index);
                }
            }
            //封装轮播函数
            function run(index){
                function m(){
                    //1.获取右侧ul的位置
                    var nowPos=parseInt(rightUl.style.top);
                    console.log(nowPos);
                    //2.获取最终移动位置
                    var end=-(index*460)
                    // console.log(end)
                    //3.设置移动速度
                    var speed=60;
                    //4.开始移动：判断当前移动的距离是否超出速度
                    if(Math.abs(nowPos-end)>speed){
                        //判断移动方向
                        nowPos-=(Math.abs(nowPos-end)/(nowPos-end))*speed;
                        rightUl.style.top=nowPos+'px';
                        setTimeout(m,100);

                    }else{
                        rightUl.style.top=end+'px';
                    }
                }
                m();
            }
            //设置自动轮播函数
            function step(){
                leftLis[flag].className='';
                if(flag>=leftLis.length-1){
                    flag=0;
                }else{
                    flag++;
                }
                leftLis[flag].className='currentLi';
                run(flag)

                console.log(flag);
            }
            setInterval(step,2000)
            // setInterval(function(){
            //     run(flag)
            // },3000)
        }

    </script>
</head>
<body>
    <div class="left">
        <ul>
            <li class="currentLi" val='0'><img src="./图片轮转/a.jpg" alt=""></li>
            <li val='1'><img src="./图片轮转/b.jpg" alt=""></li>
            <li val='2'><img src="./图片轮转/c.jpg" alt=""></li>
        </ul>
    </div>
    <div class="right"> 
        <ul>
            <li><img src="./图片轮转/a.jpg" alt=""></li>
            <li><img src="./图片轮转/b.jpg" alt=""></li>
            <li><img src="./图片轮转/c.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>